﻿<%request.setAttribute("path", request.getContextPath());%>
<%@page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录-青鸟会员服务</title>
    <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
    <link rel="stylesheet" href="${path}/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="${path}/assets/css/tailwind.output.css"/>
    <link rel="stylesheet" href="${path}/assets/css/style.css" charset="utf-8">
    <script src="${path}/assets/js/jquery-1.11.1.min_044d0927.js" type="text/javascript"></script>
    <script
            src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
            defer
    ></script>
    <script src="${path}/assets/js/init-alpine.js"></script>
</head>
<body>
<div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" style="padding-top: 0;">
    <div
            class="flex-1 h-full max-w-4xl mx-auto rounded-lg dark:bg-gray-800"
    >
        <a href="${path}/Index"><img src="${path}/assets/img/logo/logo.png" alt="" style="margin:auto" class="p-6"></a>
        <div class="flex flex-col overflow-y-auto md:flex-row shadow-xl"
             style="box-shadow: 0 2rem 80px -5px rgb(0 0 0 / 50%); border-radius: 20px;"
        >
            <div class="h-32 md:h-auto md:w-1/2">
                <img
                        aria-hidden="true"
                        class="object-cover w-full h-full dark:hidden"
                        src="${path}/assets/img/login-office.jpeg"
                        alt="Office"
                />
                <img
                        aria-hidden="true"
                        class="hidden object-cover w-full h-full dark:block"
                        src="${path}/assets/img/login-office-dark.jpeg"
                        alt="Office"
                />
            </div>
            <div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2 bg-white">
                <div class="w-full">
                    <h1
                            class=" text-xl font-semibold text-gray-700 dark:text-gray-200"
                            style="margin-bottom: 40px"
                    >
                        青鸟会员-登录
                    </h1>
                    <form id="loginForm">
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">手机号</span>
                            <input
                                    class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                    placeholder="请输入手机号码" name="name" id="userName" onblur="checkUserName()"
                                    onfocus="clearNode()"
                            /><span id="sNumber" class="ErrorInfo" style="display: block;height: 20px"></span>
                        </label>
                        <label class="block text-sm" style="margin-top: 10px">
                            <span class="text-gray-700 dark:text-gray-400">密码</span>
                            <input
                                    class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
                                    placeholder="请输入密码"
                                    name="pwd" id="userPass"
                                    type="password"
                            /><span id="sPwd" class="ErrorInfo" style="display: block;height: 20px"></span>
                        </label>
                        <!-- You should use a button here, as the anchor is only used for the example  -->
                        <button type="button" onclick="loginSubmit()"
                                class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
                        >
                            登录
                        </button>
                    </form>
                    <hr class="my-8" style="margin: 15px 0"/>

                    <a href="${path}/Regist">
                        <button
                                class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
                        >
                            <i class="fa fa-info w-4 h-4 mr-2"></i>
                            立即注册
                        </button>
                    </a>
                    <button
                            class="flex items-center justify-center w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-white text-gray-700 transition-colors duration-150 border border-gray-300 rounded-lg dark:text-gray-400 active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray"
                    >
                        <i class="fa fa-question w-4 h-4 mr-2"></i>
                        忘记密码
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 验证用户名
    function checkUserName() {
        let spanNode = document.getElementById("sNumber");
        let userName = jQuery("#userName").val();
        if (userName.length === 11) {
            return true;
        } else {
            spanNode.innerHTML = "手机号输入有误"
            return false;
        }
    }

    function clearNode() {
        let spanNode = document.getElementById("sNumber");
        spanNode.innerHTML = "";
        spanNode = document.getElementById("sPwd");
        spanNode.innerHTML = "";
    }

    function loginSubmit() {
        document.getElementById("sPwd").innerHTML = "";
        let userName = document.getElementById("userName").value;
        let userPwd = document.getElementById("userPass").value;
        if (userName !== "" && userPwd !== "" && checkUserName()) {
            loginAjax(userName, userPwd);
        } else {
            alert("请正确地输入用户名和密码");
        }
    }

    function loginAjax(userName, userPwd) {
        $.ajax({
            url: "${path}/userServlet",
            data: {
                name: userName,
                pwd: userPwd,
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data == true) {
                    $("#sPwd").text("登录成功！");
                    window.location.replace(document.referrer);
                } else {
                    $("#sPwd").text("账号或密码错误！");
                }
            },
            error: function () {
                $("#sPwd").text("账号或密码错误！");
            }
        })
    }
</script>
</body>
</html>
